/*!
  SPARTA v0.1
  This file is for theme configuration. These variables are used in global and component CSS files.

  You can:
    1) Set new values for Bootstrap variables - https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
    2) Set new values for cxbase variables - cxbase/_variables.scss
    3) Set new values for component variables - app/__/_.scss
  You cannot:
    1) Add new variables
*/
@import '../../cxbase/functions';
@import '../../cxbase/mixins';

//fonts (see _fonts.scss to import)
$font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont,
  'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol';

// change theme-colors here
$primary: #fe5757 !default;
$secondary: #747881 !default;
$success: #5dac06 !default;
$danger: #db0002 !default;
$warning: #ffc107 !default;
$info: #17a2b8 !default;
$light: #d3d6db !default;
$dark: #212738 !default;
$background: #f4f4f4 !default;
$inverse: #ffffff !default;
$text: #212738 !default;
$transparent: transparent !default;

$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'danger': $danger,
  'warning': $warning,
  'info': $info,
  'light': $light,
  'dark': $dark,
  'background': $background,
  'inverse': $inverse,
  'text': $text,
  'transparent': $transparent
);

//type — https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L225
$font-size-base: 1rem; //16px
// $h1-font-size: $font-size-base * 2.375; //38px
$h1-font-size: $font-size-base * 2.25; //36px
$h2-font-size: $font-size-base * 1.75; //28px
$h3-font-size: $font-size-base * 1.375; //22px
$h4-font-size: $font-size-base * 1.125; //18px
$h5-font-size: $font-size-base; //16px
$small-font-size: $font-size-base * 0.875; //14px

$font-weight-normal: 400;
$font-weight-semi: 600;
$font-weight-bold: 700;
$headings-font-weight: $font-weight-semi;

//update type size and weights
$type: (
  '1': $h1-font-size $font-weight-normal,
  '2': $h2-font-size $headings-font-weight,
  '3': $h3-font-size $headings-font-weight,
  '4': $h4-font-size $font-weight-bold,
  '5': $h5-font-size $font-weight-bold,
  '6': $h5-font-size $headings-font-weight,
  '7': $small-font-size $font-weight-normal,
  '8': $small-font-size $font-weight-bold
);

//bring in variable defaults
@import '../../cxbase/variables';

/*
GLOBAL VARIABLE OVERRIDES
  These can be set with anything above or any variables exposed in Bootsrap or cxbase
*/
$grid-gutter-width: 30px;

$line-height-base: 1.6;
$headings-line-height: 1.222222222222222;

$paragraph-margin-bottom: 1.5rem;
$border-radius: 0.25rem;

$btn-padding-y: 14px;

$input-height: 48px;
$input-btn-focus-box-shadow: none;
$input-padding-y: 0.6875rem;
$custom-select-padding-y: $input-padding-y;
$label-margin-bottom: 0.375rem;
$alert-padding-y: 20px;
$alert-border-radius: 0;

$input-placeholder-color: lighten($body-color, 50);
$input-border-color: theme-color('light');
$input-focus-border-color: theme-color('dark');
$input-focus-bg: theme-color('background');

$custom-select-bg: color('white');
$custom-select-border-color: $input-border-color;
$body-color: $text;
$body-bg: $inverse;

//remove variables
$colors: map-remove(
  $colors,
  'indigo',
  'purple',
  'pink',
  'orange',
  'teal',
  'cyan',
  'gray-dark',
  'gray',
  'blue',
  'red',
  'yellow',
  'green',
  'white'
);

/*
COMPONENT VARIABLE OVERRIDES
  For example, the following would override the cx-storefront background set in src/app/ui/layout/main/main.component.scss
  $cx-storefront-background-color: "info";
*/
$spinWhileLoading: true !default;
$spinWhileWaiting: true !default;
$zoomThumbOnHover: true !default;
$overlayWhileLoading: true !default;
$useTabsOnPDP: true !default;
